<div class="pm_modal {{ctrl.class}} domains" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <button type="button" ng-click="ctrl.close()" aria-hidden="true" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <domains-menu-step></domains-menu-step>
                <span ng-show="ctrl.domain.MxState === 0" class="pull-right pm_badge error" translate translate-comment="MX status badge"  translate-context="MX configuration status badge">Not set</span>
                <span ng-show="ctrl.domain.MxState === 1 || ctrl.domain.MxState === 2" class="pull-right pm_badge error" translate translate-comment="MX status badge" translate-context="MX configuration status badge">Not set properly</span>
                <span ng-show="ctrl.domain.MxState === 3" class="pull-right pm_badge success" translate translate-comment="MX status badge" translate-context="MX configuration status badge">Good</span>
                <h4 class="modal-title">4. <span>MX Records</span> (<em translate-context="MX configuration status badge" translate>Required</em>)</h4>
            </div>
            <div class="modal-body pm_form">
                <p translate translate-context="Info">Before you can receive emails for your custom domain addresses at ProtonMail, you need to add the following MX records to your DNS. This can typically be done in the control panel of your domain name registrar.</p>
                <p translate translate-context="Info">Please add the following MX record. Note, DNS records can take several hours to update.</p>
                <p><a target='_blank' href='https://protonmail.com/support/knowledge-base/dns-records/' translate translate-context="Action">Learn more</a></p>

                <div class="pm_table">
                    <table class="record">
                        <tr>
                            <th scope="col" style="width:3rem" translate translate-context="Title">Type</th>
                            <th scope="col" style="width:6.5rem" translate translate-context="Title">Host name</th>
                            <th scope="col" style="width: 12rem" translate translate-context="Title">Value / Data / Points to</th>
                            <th scope="col" style="width:4rem" translate translate-context="Title">Priority</th>
                        </tr>
                        <tr>
                            <td><code>MX</code></td>
                            <td><code>@</code></td>
                            <td><code>mail.protonmail.ch</code></td>
                            <td><code>10</code></td>
                        </tr>
                        <tr>
                            <td><code>MX</code></td>
                            <td><code>@</code></td>
                            <td><code>mailsec.protonmail.ch</code></td>
                            <td><code>20</code></td>
                        </tr>
                    </table>
                </div>

                <p class="alert alert-info" translate translate-context="Info">Delete any other MX records or make sure ProtonMail's Priority is the lowest number.</p>
                <p class="alert alert-info" translate translate-context="Info">If this domain is currently actively receiving emails, create all used email addresses in Step 3 before changing MX record to ensure a smooth transition.</p>
            </div>

        </div>
        <div class="modal-footer">
            <button class="pm_button modal-footer-button" ng-click="ctrl.close()" translate translate-context="Action">Close</button>
            <button class="pm_button primary modal-footer-button" ng-click="ctrl.next()" translate translate-context="Action">Next</button>
        </div>
    </div>
    <div class="modal-overlay"></div>
</div>
